<template>
  <div class="dialog">
    <!-- <el-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button> -->

    <el-dialog title="修改账户信息" :visible.sync="visiable">
      <div class="dialog-wrapper">
          <el-form label-width="80px" :model="formLabelAlign" :rules="rules">
          <el-form-item label="名称：" prop="name">
            <el-input v-model="formLabelAlign.name"></el-input>
          </el-form-item>
          <el-form-item label="手机号码：" style=" white-space: nowrap" prop="phone">
            <el-input v-model="formLabelAlign.phone"></el-input>
          </el-form-item>
          <el-form-item label="账号：" prop="realname">
            <el-input v-model="formLabelAlign.realname"></el-input>
          </el-form-item>
          <el-form-item label="密码：" prop="password">
            <el-input v-model="formLabelAlign.password"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="visiable = false">取 消</el-button>
          <el-button type="primary" @click="visiable = false" @click.native="editAdmin">确 定</el-button>
        </div>
      </div>
    </el-dialog> 
  </div>
</template>
<script>
import {editUser} from '@/api/user'
import {Message} from 'element-ui'
  export default {
    props: {
      scope: {
        type: Object,
        default: {}
      }
    },
    data() {
      let regPhone = /^[1][3,4,5,7,8][0-9]{9}$/
      let validatePhone = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入电话号码'));
        } else {
          if (!regPhone.test(this.formLabelAlign.phone)) {
            callback(new Error('请输入有效电话号码'));
          }
          callback()
        }
      }
      return {
        visiable: false,
        formLabelAlign: {
          name: '',
          phone: '',
          realname: '',
          password: ''
        },
        rules: {
          name: [{message: '请输入账号', trigger: 'blur', required:true }],
          phone: [
            { validator: validatePhone, trigger: 'blur', required:true}
          ],
          realname: [{message: '请输入姓名', trigger: 'blur', required:true}],
          password: [{message: '请输入密码', trigger: 'blur', required:true}]
        }
      }
    },
    updated() {
    },
    methods: {
      changeVisable() {
        this.visiable = true
        setTimeout(() => {
          this.formLabelAlign.name = this.scope.row.name
          this.formLabelAlign.phone = this.scope.row.phone
          this.formLabelAlign.realname = this.scope.row.username
        }, 20)
      },
      editAdmin() {
        editUser(this.formLabelAlign)
        // console.log(this.scope.row)
      }
    }
  }
</script>
<style lang="scss" scoped>
.dialog /deep/ .el-dialog{
    width: 654px;
    height: 396px;
    border-color: rgb(187, 187, 187);
    border-radius: 4px;
    font-size: 14px;
    padding: 0px;
    border-width: 1px;
    border-style: solid;
    text-align: left;
    line-height: 20px;
    font-weight: normal;
    font-style: normal;
    opacity: 1;
    .el-form{
      position: relative;
      top: -10px;
    }
    .el-form-item__label{
      white-space: nowrap;
    }
    .el-dialog__header{
      text-align-last: left;
      font-family: SourceHanSansSC;
      font-weight: 700;
      font-size: 16px;
      color: rgb(16, 16, 16);
      font-style: normal;
      line-height: 24px;
    }
    .el-input__inner{
      width: 305px !important;
      height: 35px;
      border-color: rgb(233, 233, 233);
      font-size: 14px;
      padding: 0px;
      border-width: 1px;
      border-style: solid;
      line-height: 20px;
      font-weight: normal;
      font-style: normal;
      opacity: 1;
    }
    .unit{
      position: absolute;
      left: 270px;
    }
    .dialog-footer{
      display: flex;
      justify-content: flex-start;
      position: relative;
      top: -15px;
      .el-button{
        width: 80px;
        height: 30px;
        border-radius: 4px;
        font-size: 14px;
        border-width: 1px;
        border-style: solid;
        text-align: center;
        font-weight: normal;
        font-style: normal;
        opacity: 1;
        padding: 0;
        span{
          display: inline-block;
          height: 30px;
          line-height: 30px;
        }
        &:nth-of-type(2){
          background-color: rgb(90, 152, 222);
        }
      }
    }
}
</style>
